<template>
	<view>
		<view style="margin-top: 15px;">
			<!-- <u-line-progress active-color="#193867" :striped="true" :percent="50" :striped-active="true" height="20px"></u-line-progress>
			<text style="margin-left: 40px;">微信授权（已完成）</text> 
			<text style="margin-left: 80px;">提交注册（进行中）</text> -->
			<u-steps :list="numList" :current="0" mode="number"></u-steps>
		</view>
		
		<u-form  :model="params" :rules="rules" ref="uForm" :errorType="errorType" >
			
			<view class="box1">
				<view class="profily">
					<view style="margin-top: -20px;">
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="真实姓名" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="填写您的姓名" v-model="userInfo.realName" type="text"></u-input>
						</u-form-item>
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="校友性别" label-width="150" :required="true">
							<u-input :border="border" placeholder="校友性别" v-model="userInfo.sexName" type="select"  @click="sexListShow = true" />
							<u-action-sheet :list="sexList" v-model="sexListShow" @click="actionSex"></u-action-sheet>
						</u-form-item>	
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="校友身份" label-width="150" :required="true">
							<u-input :border="border" placeholder="校友身份" v-model="userInfo.identity" type="select"  @click="identityListShow = true" />
							<u-action-sheet :list="identityList" v-model="identityListShow" @click="actionIdentity"></u-action-sheet>
						</u-form-item>	
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="出生年月" label-width="150" :required="true">
							<u-input :border="border" placeholder="出生年月" v-model="userInfo.birthday" type="select"  @click="birthdayShow = true"></u-input>
							<!-- <u-calendar v-model="birthdayShow" mode="date" @change="birthdayChange"></u-calendar> -->
							<u-picker mode="time" v-model="birthdayShow" @confirm="confirm" :params="params"></u-picker>
						</u-form-item>	
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="所在城市" label-width="150" :required="true">
							<u-input :border="border" placeholder="所在城市" v-model="userInfo.liveCity" type="select" @click="liveCityShow = true"></u-input>
							<city-select v-model="liveCityShow" @city-change="liveCityChange" ></city-select>
						</u-form-item>	
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="所属籍贯" label-width="150" :required="true">
							<u-input :border="border" placeholder="例如:安徽省" v-model="userInfo.nativePlace" type="text"  @click="classificationListShow = true" />
							<u-action-sheet :list="classificationList" v-model="classificationListShow" @click="actionClassification"></u-action-sheet>
						</u-form-item>	
					</view>
				</view>
			</view>
			
			<view class="box2">
				<view class="profily">
					<view style="margin-top: -20px;">
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="专业与班级" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="在校专业与班级, 例如软件192" v-model="userInfo.majorClass" type="text"></u-input>
						</u-form-item>
						

						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="入学年份" label-width="150" :required="true">
							<u-input :border="border" placeholder="入学日期" v-model="userInfo.enterTime" type="select"  @click="enterTimeShow = true"></u-input>
							<u-calendar v-model="enterTimeShow" mode="date" @change="enterTimeChange"></u-calendar>
						</u-form-item>	
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="毕业年份" label-width="150" :required="true">
							<u-input :border="border" placeholder="毕业日期" v-model="userInfo.graduateTime" type="select"  @click="graduateTimeShow = true"></u-input>
							<u-calendar v-model="graduateTimeShow" mode="date" @change="graduateTimeChange" max-date="2050-12-31"></u-calendar>
						</u-form-item>	
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="获得学历" label-width="150" :required="true">
							<u-input :border="border" placeholder="获得学历" v-model="userInfo.educationBackgroundName" type="select"  @click="educationBackgroundListShow = true"/>
							<u-action-sheet :list="educationBackgroundList" v-model="educationBackgroundListShow" @click="actionEducationBackground" height='500px'></u-action-sheet>
						</u-form-item>	
					</view>
				</view>
			</view>
			
			<view class="box3">
				<view class="profily">
					<view style="margin-top: -20px;">
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="行业领域" label-width="150" :required="true">
							<u-input :border="border" placeholder="行业领域" v-model="userInfo.occupationalName" type="select"  @click="occupationalListShow = true" />
							<c-action-sheet :list="occupationalList" v-model="occupationalListShow" @click="actionOccupational"></c-action-sheet>
						</u-form-item>	
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="更多行业说明" label-width="200" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="更多行业说明" v-model="userInfo.occupationalDescription" type="text"></u-input>
						</u-form-item>
									
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="工作单位" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="工作单位" v-model="userInfo.workUnit" type="text"></u-input>
						</u-form-item>
			
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="当前职位" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="当前职位" v-model="userInfo.position" type="text"></u-input>
						</u-form-item>								
			
					</view>
				</view>
			</view>
			
			<view class="box5">
				<view class="profily">
					<view style="margin-top: -20px;">
						<u-form-item :label-position="labelPosition" label="图片上传 (用于人脸识别查询校友)" label-width="500" :required="true"></u-form-item>
						<jade-image-upload
							 :list="media"
							 :control="control"
							 :columnType="columnType"
							 :maxCount="maxCount"
							 :compressSize="compressSize"
							 :compressQuality="compressQuality"
							 :compressWidth='compressWidth'
							 :imageSize="imageSize"
							 @chooseFile="chooseFile"
							 @imgDelete="mediaDelete"
						 >
						</jade-image-upload>
					</view>
				</view>
			</view>
			
			<view class="box4">
				<view class="profily">
					<view style="margin-top: -20px;">
						
						<u-form-item :label-position="labelPosition" label="是否展示" label-width="150" :required="true">
							<u-radio-group v-model="userInfo.showInformation" @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list" :key="index" 
									:name="item.value"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="联系电话" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="请填写您的联系电话" v-model="userInfo.phone" type="text"></u-input>
						</u-form-item>
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="微信" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="请填写您的微信" v-model="userInfo.wechat" type="text"></u-input>
						</u-form-item>
						
									
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="Email" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="请填写您的Email" v-model="userInfo.email" type="text"></u-input>
						</u-form-item>


						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="QQ号码" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="请填写您的QQ号码" v-model="userInfo.qq" type="text"></u-input>
						</u-form-item>								
			
					</view>
				</view>
			</view>
			
			<button class="button" @click="submit">提交注册</button>
		</u-form>
		<view style="height: 30px;"></view>
	</view>
</template>

<script>
	import citySelect from '../../components/u-city-select/u-city-select.vue'
	import cActionSheet from '../../components/c-action-sheet/c-action-sheet.vue'
	//图片上传地址
	import url from '../../common/url.js';
	//图片上传
	import jadeImageUpload from '@/components/jade-image-upload/jade-image-upload.vue';
    export default {
		components: {
			citySelect,
			cActionSheet,
			jadeImageUpload,
		},
        data() {
            return {
				sexList:[
					{
						label: '男',
						value: 1
					},
					{
						label: '女',
						value: 0
					}
				],
				identityList:[
					{
						label: '就读'
					},
					{
						label: '教职工'
					}
				],
				educationBackgroundList: [],
				numList: [{
						name: '微信授权'
					}, {
						name: '提交注册'
					},
				],
				occupationalList: [],
				sexListShow: false,
				identityListShow: false,
				educationBackgroundListShow: false,
				liveCityShow: false,
				birthdayShow: false,
				enterTimeShow : false,
				graduateTimeShow: false,
				occupationalListShow: false,
				userInfo: {
					username: '',
					sex: '',
					identity: '',
					birthday: '',
					liveCity: '',
					nativePlace: '',
					majorClass: '',
					enterTime: '',
					graduateTime: '',
					educationBackgroundName: '',
					occupationalId: '',
					occupationalDescription: '',	
					workUnit: '',
					position: '',
					phone: '',
					wechat: '',
					email: '',
					qq: '',
					showInformation: '',	
					openId: this.$store.state.vuex_user.openId,
					headUrl: '',
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					// 选择时间的时间戳
					timestamp: true,
				},
				//是否展示
				list: [
					{
						name: '是',
						value: 1,
						disabled: false
					},
					{
						name: '否',
						value: 0,
						disabled: false
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '是',
				/* 上传图片 */
				control: true,
				columnType: 'other',
				maxCount: 6,
				compressSize: 0.2,
				imageSize: 2,
				compressQuality: 0.8,
				compressWidth: 375,
				uploadTask: null,
				media: [], //数据源
				
				rules: {
					username: [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					sex:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					identity:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					birthday:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					liveCity:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					nativePlace:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					majorClass:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					enterTime:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					graduateTime:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					educationaBackground:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					occupationalId:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					occupationalDescription:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					workUnit:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					position:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					phone:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					wechat: [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					email:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					qq:  [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
					showInformation: [
						{
							required: true, 
							message: '真实姓名不能为空',
							trigger: 'change' ,
						}
					],
				 }
            }
        },
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
        onLoad(params) {
			let userInfo = JSON.parse(decodeURIComponent(params.userInfo))
			this.userInfo = userInfo
			this.getOccupationalList()
			this.getEducationBackgroundList()
        },
        methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			actionSex(index) {
				this.userInfo.sexName = this.sexList[index].label
				this.userInfo.sex = this.sexList[index].value
			},
			actionIdentity(index) {
				if(index == 0) {
					this.userInfo.identity = '就读'
				} else if(index == 1) {
					this.userInfo.identity = '教职工'
				}
			},
			actionEducationBackground(index) {
				this.userInfo.educationBackground = this.educationBackgroundList[index].value
				this.userInfo.educationBackgroundName = this.educationBackgroundList[index].label
			},
			actionOccupational(index) {
				this.userInfo.occupationalId = this.occupationalList[index].value
				this.userInfo.occupationalName = this.occupationalList[index].label
			},
			liveCityChange(e) {
				this.userInfo.liveCity = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			/* birthdayChange(e) {
				this.userInfo.birthday = e.result
			}, */
			//出生年月
			confirm(e) {
				this.userInfo.birthday = e.year + '-' +  e.month  + '-' + e.day;
			},
			enterTimeChange(e) {
				this.userInfo.enterTime = e.result
			},
			graduateTimeChange(e) {
				this.userInfo.graduateTime = e.result
			},
			//上传图片前的钩子
			async beforeUpload(index, list) {
				// await等待一个请求，请求回来后再返回true，继续上传文件
				let data = await this.$u.post('url');
				return true; // 或者根据逻辑返回false
			},
			//获取行业列表
			async getOccupationalList() {
				const params = {
					page: 1,
					size: 100
				}
				await this.$u.api.getOccupationalList(params).then(res =>{
					if(res.code == 200) {
						this.occupationalList = res.data
					} else {
						uni.showToast({
							icon:"error",
							title:"获取行业领域失败"
						})
					}
				})
			},
			//获取学历列表
			async getEducationBackgroundList() {
			 	await this.$u.api.getEducationBackgroundList().then(res =>{
					if(res.code == 200) {
						this.educationBackgroundList = res.data
					} else {
						uni.showToast({
							icon:"error",
							title:"获取学历失败"
						})
					}
				})
			},
			async submit() {
				// this.$refs.uForm.validate(valid => {
				// 	debugger
				// 	console.log(this.userInfo);
				// 	if (valid) {
				// 		console.log('验证通过');
						// 调用接口请求openid
						uni.showLoading({
							title: '登录中'
						});
						var that = this
						const res = await that.$u.api.wxLogin(that.userInfo)
						that.$u.vuex('vuex_token',res.data)
						
						const params = {
							openId: that.userInfo.openId
						}
						const info = await that.$u.api.userInfo(params)
						that.$u.vuex('vuex_user', info.data)
			
						if(res.code==200 && info.code==200) {
							uni.showToast({
								title:"登录成功"
							})
							that.$u.route({
								type:'reLaunch',
								url: '/pages/my/my_index'							
							})
						} else {
							uni.showToast({
								icon:"none",
								title:"获取失败，请重试"
							})
						}
						//  var path = '/user/getOpenId'
						//  that.$http(path,data).then((response)=>{
						// 	userInfo['openid'] = response
						// 	console.log(userInfo)
						// })
			
						setTimeout(function () {
						  uni.hideLoading()
						}, 2000)
						
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// });
			},
			
			/* 上传图片 */
			
			//上传
			chooseFile(e) {
				this.uploadFileToServe(e)
			},
			//中断上传并删除
			mediaDelete(e) {
				// console.log("e = ", e);
				// console.log("this.media[e].src = ", this.media[e].src);
				//从七牛云删除
				this.$u.api.deleteImg(this.media[e].src)
				
				this.uploadTask ? this.uploadTask.abort() : ''
				this.media.splice(e,1)
			},
			//上传逻辑处理
			uploadFileToServe(urlList) {
				if (!urlList || urlList.length <= 0) {
					return
				};
				//以七牛云为例,可根据实际需求灵活调整
				urlList.forEach((item) => {
					this.uploadTask = uni.uploadFile({
						url: url.uploadUrl, //后端上传接口
						filePath: item.src,
						fileType:'image',
						name: 'image', //后台对应的参数名
						
						success: (res) => {
							let data = JSON.parse(res.data) //后端返回的数据
							if (data.code==200) {
								item.status = 'success'
								item.progress = '上传成功'
								item.src = data.data
							} else {
								item.status = 'error'
								item.progress = '上传失败'
							}
						}
					});
					this.uploadTask.onProgressUpdate((res) =>{
						item.percent = res.progress
						this.media.splice(item.index,1,item)
					})
				})
				// console.log("this.help.imageUrlList = ", this.help.imageUrlList);
				// console.log("this.media = ", this.media);
			},
        }
    }
</script>

<style lang="scss">
	.box1 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: 362px;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}	
	.box2 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: 243px;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}	
	.box3 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: 240px;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}
	.box4 {
		position: relative;
		padding-top: 10px;
		.profily {
			positio: absolute;
			width: 90%;
			height: 300px;
			// height: auto;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
		margin-bottom: 30px;
	}
	.box5 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: 200px;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}
	.button {
		background-color: #193867;
		color:white;
		width: 380px;
		height: 40px;
		border:0;
		font-size: 16px;
		color: #f2f2f2;
		border-radius: 30px;
	}

</style>